<template>
  <span class="edit-text-container">
    <el-link v-if="!isEdit && !tag" @click="isEdit = true" size="mini" :underline="false">
      {{mode.text}}
      <i v-if="iconVisible" :class="iconClass || 'el-icon-edit'"></i>
      <i v-if="mode.text && clearable" class="el-icon-circle-close" @click="clear" ></i>
    </el-link>
    <el-tag type="info" v-if="!isEdit && tag" @click="isEdit = true" size="mini" style="cursor: pointer;">
      {{mode.text}}
      <i v-if="iconVisible" :class="iconClass || 'el-icon-edit'"></i>
      <i v-if="mode.text && clearable" class="el-icon-circle-close" @click="clear" ></i>
    </el-tag>
    <el-form ref="form" :inline="true" :model="mode" v-if="isEdit" :rules="rules" size="mini">
      <el-form-item prop="text">
        <el-input v-model="mode.text" :readonly="loading"></el-input>
        <span class="text-btn-container">
          <i v-if="!loading" class="el-icon-check" @click="submit"></i>
          <i v-if="!loading" class="el-icon-close" @click="cancel"></i>
          <i v-if="loading"></i>
          <i v-if="loading" class="el-icon-loading"></i>
        </span>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" @click="submit">{{$t('botton.save')}}</el-button>
        <el-button type="info" @click="cancel">{{$t('botton.cancel')}}</el-button>
      </el-form-item> -->
    </el-form>
  </span>
</template>

<script>
export default {
  name: "EditText",
  data() {
    return {
      loading: false,
      isEdit: false,
      mode: {
        text: ""
      },
      rules: {
        text: [{ validator: this.validateText, trigger: 'blur' }]
      }
    };
  },
  props: ["value", "required", "editMethod", "iconClass", "clearable", "tag", "iconVisible"],
  watch: {
    value() {
      this.mode.text = this.value;
    }
  },
  mounted() {
    this.mode.text = this.value;
  },
  methods: {
    validateText(rule, value, callback) {
      if (!this.required || !this.required.bol) {
        callback();
      } else if (!value) {
        callback(new Error(this.required.message));
      } else {
        callback();
      }
    },
    cancel() {
      this.isEdit = false;
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if(valid){
          if (this.editMethod) {
            this.loading = true;
            this.editMethod(this.mode.text).then(() => {
              this.$emit('change', this.mode.text);
              this.isEdit = false;
            }).finally(() => {
              this.loading = false
            })
          } else {
            this.$emit('change', this.mode.text);
            this.isEdit = false;
          }
        }
      });
    },
    clear() {
      this.mode.text = "";
      this.submit();
    }
  }
};
</script>

<style lang="scss" scoped>
.edit-text-container {
  ::v-deep.el-form-item {
    margin: 0px;
  }

  ::v-deep.el-form-item__content {
    position: relative;
  }

  ::v-deep.el-input__inner {
    padding-right: 45px;
  }

  .text-btn-container {
    width: 45px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    padding-left: 5px;
    padding-right: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon-check {
      color: var(--color-success);
      cursor: pointer;
    }

    .el-icon-close {
      color: var(--color-info);
      cursor: pointer;
    }
  }
}
</style>